<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app"></div>
    <!-- 1.引入依赖 -->
    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/babel.min.js"></script>
    <!-- 2.开始开发 -->
    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super();

          this.state = {
            isLogin: true,
          };
        }

        render() {
          const { isLogin } = this.state;

          // 1.方案一:通过if判断: 逻辑代码非常多的情况
          let welcome = null;
          let btnText = null;
          if (isLogin) {
            welcome = <h2>欢迎回来~</h2>;
            btnText = "退出";
          } else {
            welcome = <h2>请先登录~</h2>;
            btnText = "登录";
          }

          return (
            <div>
              <div>{welcome}</div>

              {/* 2.方案二:使用三元运算符 */}
              <button onClick={e => this.btnClick()}>
                {isLogin ? "退出" : "退出"}
              </button>
              <h2>{isLogin ? "hello" : null}</h2>
              <hr />

              {/* 3.方案三: 逻辑与&& */}
              {/* 逻辑与: 一个条件不成立, 后面的条件都不会进行判断了 */}
              <h2>{isLogin && "你好啊, kobe"}</h2>
              {isLogin && <h2>你好啊, kobe</h2>}
            </div>
          );
        }

        btnClick() {
          this.setState({
            isLogin: !this.state.isLogin,
          });
          console.log(this);
        }
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>
